
<template>
  <div class="register">
    <video
      class="myvideo"
      id="myvideo"
      autoplay
      loop
      muted
      playsInline
      src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4"
    ></video>
    <div class="login-box">
      <h3 class="title">欢迎注册(尊贵的业主)</h3>
      <div class="box">
        <div>
          <el-form
            :label-width="80"
            :model="form"
            class="myform"
            status-icon
            :rules="rules"
            ref="myform"
          >
            <el-form-item label="用户名称" prop="username">
              <el-input
                type="text"
                placeholder="请输入"
                v-model="form.username"
                :prefix-icon="User"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                type="text"
                placeholder="请输入"
                v-model="form.phone"
                :prefix-icon="Phone"
              ></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input
                type="password"
                placeholder="请输入"
                v-model="form.password"
                show-password
                :prefix-icon="Lock"
                @blur="checkDbPass"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="dbpass">
              <el-input
                type="password"
                placeholder="请输入"
                v-model="form.dbpass"
                show-password
                :prefix-icon="Lock"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <p class="flex">
                <el-button
                  type="primary"
                  class="btn"
                  @click="submitForm('myform')"
                  >注册</el-button
                >
                <el-button
                  type="danger"
                  class="btn"
                  @click="resetForm('myform')"
                  >重置</el-button
                >
              </p>
            </el-form-item>
            <el-form-item class="lastitem">
              <div class="links">
                <router-link class="litem" :to="{ name: 'login' }">
                  已有账号,立即登录
                </router-link>
                <router-link class="litem color" :to="{ name: 'forgetpass' }">
                  忘记密码
                </router-link>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { ref, toRefs, reactive, onMounted } from "vue";
import { Calendar, Phone, User, Lock } from "@element-plus/icons";
import { toast } from "@/utils";
import { reg } from "@/utils/validate";
import { ajax } from "@/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    const myform = ref();
    const router = useRouter();
    const state = reactive({
      form: {
        role: 1,
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: reg.phone,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            trigger: "blur",
            message: "请输入6-16的数字字母密码组合",
          },
          // {
          //     // 判断2次密码不一致
          //     validator:function(rule,value,callback){
          //         // if(reg.pwd.test(state.form.dbpass)){
          //         //     myform.value.validateField("dbpass")  // 调取dbpass 的正则
          //         // }else{
          //         //     callback()
          //         // }
          //         if(state.form.dbpass!=""){
          //             myform.value.validateField("dbpass")
          //         }else{
          //             callback()
          //         }
          //     },
          //     trigger:'blur',
          // }
        ],
        dbpass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: reg.pwd,
            trigger: "blur",
            message: "请输入6-16的数字字母密码组合",
          },
          {
            validator: function (rule, value, callback) {
              //
              if (value != state.form.password) {
                callback(new Error("两次密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      User,
      Lock,
      Phone,
    });
    const submitForm = () => {
      myform.value.validate(async (valid) => {
        console.log(valid);
        if (valid) {
          // ajax
          // state.form.role = 1;  // 普通用户  用户权限  自己注册
          console.log(state.form);
          const { code, result } = await ajax.register(state.form);
          if (code == 200) {
            // gotopage("login")
            router.push({
              name: "login",
              query: { username: state.form.username },
            });
          }
          // ajax.register(state.form)
          // .then(res=>{
          //     if(res.code==200){

          //     }
          // })
        } else {
          toast.error("请输入有效的注册数据!");
        }
      });
    };
    const resetForm = () => {
      myform.value.resetFields();
    };

    const checkDbPass = () => {
      //  myform.value.validateField("dbpass")
      if (state.form.dbpass != "") {
        myform.value.validateField("dbpass"); // 密码去吊起确认密码的正则 比较2次 密码是否一致
      }
    };

    // async + await  内置Promise 异步变成同步
    const checktest = async () => {
      // ajax.testIndex()
      // .then(res=>{

      // })
      let res = await ajax.testIndex();
      console.log(res);
    };

    onMounted(() => {
      checktest();
    });
    return {
      ...toRefs(state),
      myform,
      resetForm,
      submitForm,
      checkDbPass,
    };
  },
};
</script>

<style lang="scss"  >
.register {
  width: 100%;
  height: 100%;
  .myvideo {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .login-box {
    position: absolute;
    width: 390px;
    height: 440px;
    // min-height:340px;
    border: 1px solid darkkhaki;
    border-radius: 8px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    .title {
      font-size: 26px;
      text-align: center;
      font-weight: 500;
      color: #fff;
    }
    .box {
      margin-top: 20px;
      .el-tabs__nav {
        width: 100%;
        .el-tabs__active-bar {
          background-color: darkorange;
        }
        .el-tabs__item {
          flex: 1;
          width: 50%;
          text-align: center;
          color: #fff;
        }
        .is-active {
          color: darkorange;
        }
      }
      .myform {
        .el-form-item__label {
          color: #fff;
        }
        .el-input__icon {
          color: #fff;
        }
        .el-input__inner {
          background: transparent;
          color: #fff;
        }

        .flex {
          display: flex;
          .btn {
            flex: 1;
          }
        }
        .lastitem {
          margin-bottom: 0;
          height: 20px;
          ::v-deep .el-form-item__content {
            line-height: 1 !important;
            height: 20px;
          }
          .links {
            display: flex;
            justify-content: space-between;
            .litem {
              font-size: 12px;
              color: darkorange;
            }
            .color {
              color: #fff;
            }
          }
        }
      }
    }
  }
}

.lastitem {
  ::v-deep .el-form-item__content {
    line-height: 1;
  }
}
</style>